﻿$(document).ready(function () {
    $('.bar-chart').each(function () {
        var values = [];
        var labels = [];
        var data = jQuery.parseJSON($('pre', this).text());
        $(data, this).each(function () {
            var subValues = [];
            var subLabels = [];
            for (var key in this) {
                subValues.push(parseInt(this[key].Value));
                subLabels.push(this[key].Key);
            }
            values.push(subValues);
            labels.push(subLabels);
        });
        $('pre', this).hide();
        var id = $('div', this).attr('id');
        var height = values.length * values[0].length * 30;
        var r = Raphael(id),
            fin = function () {
                this.flag = r.popup(this.bar.x, this.bar.y, this.bar.value || "0").insertBefore(this);
            },
            fout = function () {
                this.flag.animate({ opacity: 0 }, 300, function () { this.remove(); });
            };
        r.hbarchart(5, 10, 500, height, values).lighter(2).label(labels).hover(fin, fout);
    });
});